import React, { useState,useEffect } from 'react'
import { Search, Tabs } from 'react-vant';
import { useNavigate, Outlet } from 'react-router-dom';
import { useDispatch,useSelector } from 'react-redux';
import { async_shoplist,async_typelist } from '../store/Slice';

export default function Home() {

    let dispatch = useDispatch()
    useEffect(()=>{
        dispatch(async_shoplist())
        dispatch(async_typelist())
    },[])

    /* 搜索 */
    const [value, setValue] = useState('');

    /* 标签栏数据 */
    const tablist = [
        { title: '推荐', patch: '/home/' },
        { title: '手机', patch: '/home/shouji' },
        { title: '智能', patch: '/home/zhineng' },
        { title: '电视', patch: '/home/dianshi' },
        { title: '家电', patch: '/home/jiadian' },
    ]

    let navigate = useNavigate()

    return (
        <div>
            {/* 搜索框 */}
            <div>
                <Search value={value} onChange={setValue} clearable placeholder="请输入搜索关键词" />
            </div>
            {/* 二级标签 */}
            <div>
                <Tabs color='orange' onChange={(e: any) => {
                    navigate(e)
                }}>
                    {tablist.map((item, index) => (
                        <Tabs.TabPane key={index} title={item.title} name={item.patch}>
                        </Tabs.TabPane>
                    ))}
                </Tabs>
            </div>

            {/* 二级路由视口 */}
            <div>
                <Outlet />
            </div>
        </div>
    )
}
